<template>
	<view>
		<u-navbar  title="" :is-back="false" :title-size="36" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff" :background="background" height="40">
			<div class="slot-wrap" slot="right">
				<u-search placeholder="请输入查询内容" v-model="keyword"  v-show="isSearch" :action-style="{color:'#fff'}"></u-search>
				<div class="header-info-box"  @click="searchPlay" v-show="!isSearch">
					<u-icon name="search" color="#fff" size="50"></u-icon>
				</div>
				<div class="header-info-box"><u-icon name="kefu-ermai" color="#fff" size="50"></u-icon></div>
				<div class="header-info-box"><u-icon name="bell" color="#fff" size="50"></u-icon></div>
			</div>
		</u-navbar>
		<!-- <u-navbar title="" :is-back="false" :title-size="36" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff"  :background="background">	
		</u-navbar> -->
	</view>
</template>

<script>
	export default {
		name: 'navbar',
		props: {
			
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				keyword:'',
				isSearch: false,
			};
		},
		methods: {
			searchPlay() {
				this.isSearch = true
				this.titleTxt = ''
			},
			
		},
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
.slot-wrap {
	display: flex;
	align-items: center;
	/* 如果您想让slot内容占满整个导航栏的宽度 */
	/* flex: 1; */
	/* 如果您想让slot内容与导航栏左右有空隙 */
	 padding: 0 30rpx; 
	 .header-info-box{
		 margin-left: 20rpx;
	 }
}
</style>
